<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>登记出库</span>
          </div>
          <div class="save_button">
            <div v-if="review" class="buttonBox">
              <el-button type="success" icon="el-icon-check" size="mini" @click="reviewSuccess">确认出库</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" size="mini" icon="el-icon-document-checked" @click="save">保存</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" size="mini" icon="el-icon-document-remove" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-form ref="form" :model="data" :inline="true" :rules="formRules">
          <el-input v-model="data.id" type="hidden" />
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item prop="coding">
                <div>编号</div>
                <el-input v-model="data.coding" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="name">
                <div>名称</div>
                <el-input v-model="data.name" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="status">
                <div>状态</div>
                <el-select v-model="data.status" size="mini" disabled>
                  <el-option v-for="(item, index) in appearStatus" :key="index" :value="index" :label="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="apply_admin_id">
                <div>申请人</div>
                <v-select v-model="data.apply_admin_id" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="4" hidden>
              <el-form-item prop="store_id">
                <div>仓库</div>
                <v-select v-model="data.store_id" action="storeList" />
              </el-form-item>
            </el-col>
            <el-col :span="4" hidden>
              <el-form-item prop="appear_date">
                <div>出库时间</div>
                <el-date-picker v-model="data.appear_date" type="datetime" size="mini" placeholder="选择日期" align="right" value-format="yyyy-MM-dd HH:mm:ss" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="workorder_id">
                <div>工单</div>
                <v-select v-model="data.workorder_id" action="workOrderList" disabled />
              </el-form-item>
            </el-col>
            <el-col v-if="data.admin_id" :span="4" hidden>
              <el-form-item prop="admin_id">
                <div>备件库管</div>
                <v-select v-model="data.admin_id" disabled />
              </el-form-item>
            </el-col>
            <div v-if="data.verify_admin">
              <el-col :span="4">
                <el-form-item>
                  <div>验证人员</div>
                  <el-input v-model="data.verify_admin.name" :disabled="true" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>验证时间</div>
                  <el-date-picker v-model="data.verify_date" type="datetime" size="mini" align="right" value-format="yyyy-MM-dd HH:mm:ss" disabled />
                </el-form-item>
              </el-col>
            </div>
            <el-col :span="4">
              <el-form-item prop="sort">
                <div>排序</div>
                <el-input v-model="data.sort" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <div>总价</div>
                <el-input v-model="totalPrice" size="mini" readonly />
              </el-form-item>
            </el-col>
            <div v-if="data.status === 1" hidden>
              <el-col :xl="3" :lg="4" :md="4" :sm="4">
                <el-form-item prop="合并出库单">
                  <div>出库单</div>
                  <v-select v-model="data.same" action="appearList" :query="{'status': 1,'workorder_id': data.workorder_id,'add_field': 'coding'}" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>操作</div>
                  <el-button type="success" icon="el-icon-check" size="mini" @click="sameSuccess">点击合并</el-button>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
        <el-tabs>
          <el-tab-pane label="详细">
            <el-table :data="list">
              <el-table-column label="备件" prop="parts.name" min-width="16%" />
              <el-table-column label="编号" prop="parts.coding" min-width="12%" />
              <el-table-column label="型号" prop="parts.spec" min-width="17%" />
              <el-table-column label="单位" prop="parts.unit" min-width="8%" />
              <el-table-column label="单价" prop="parts.price" min-width="9%" />
              <el-table-column label="数量" prop="number" min-width="8%" />
              <el-table-column label="总价" min-width="9%">
                <template slot-scope="{ row }">
                  <span v-if="row.parts">
                    {{ row.number * row.parts.price }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="notice" min-width="11%" />
              <el-table-column label="操作" prop="" min-width="9%">
                <template scope="scope">
                  <el-button v-if="data.status === 0" type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <div v-if="canAppend" slot="append" style="padding-bottom: 20px;">
                <el-form ref="parts_form" :model="parts" :inline="true" class="hf_form append_other_admin" :rules="partsRules">
                  <el-row :gutter="10">
                    <el-col :span="4">
                      <el-form-item prop="part_id">
                        <v-select-s v-model="parts.part_id" action="partsList" :query="{'add_field': 'spec'}" @change="getPartsInfo" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item>
                        <el-input v-model="parts.coding" disabled size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item>
                        <el-input v-model="parts.spec" disabled size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item>
                        <el-input v-model="parts.unit" disabled size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item>
                        <el-input v-model="parts.price" disabled size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item prop="number">
                        <el-input v-model="parts.number" size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item>
                        <el-input v-model="parts.total" size="mini" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item prop="notice">
                        <el-input v-model="parts.notice" size="mini" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-form-item>
                        <el-button icon="el-icon-upload2" size="mini" @click="append" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-row :gutter="10">
                  <el-col :span="4">
                    <span style="margin-bottom: 20px; display: block;">数量</span>
                    <el-input v-model="currentParts.number" size="mini" readonly />
                  </el-col>
                  <el-col :span="4">
                    <span style="margin-bottom: 20px; display: block;">编号</span>
                    <el-input v-model="currentParts.coding" size="mini" readonly />
                  </el-col>
                  <el-col :span="4">
                    <span style="margin-bottom: 20px; display: block;">型号</span>
                    <el-input v-model="currentParts.spec" size="mini" readonly />
                  </el-col>
                  <el-col :span="4">
                    <span style="margin-bottom: 20px; display: block;">单位</span>
                    <el-input v-model="currentParts.unit" size="mini" readonly />
                  </el-col>
                  <el-col :span="4">
                    <span style="margin-bottom: 20px; display: block;">单价</span>
                    <el-input v-model="currentParts.price" size="mini" readonly />
                  </el-col>
                </el-row>
              </div>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="描述">
            <el-col :span="24">
              <el-input v-model="data.content" type="textarea" :rows="10" />
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api/stock/appear'
import PartsApi from '@/api/stock/parts'
import { appearStatus } from '@/utils/options'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendOtherAdmin', 'appendParts', 'removeParts', 'reload', 'goUrl'],
  components: {
    VSelect,
    VSelectS
  },
  data() {
    return {
      data: {
        'cr_admin': {
          'name': ''
        },
        'verify_admin': {
          'name': ''
        }
      },
      review: false,
      canAppend: false,
      list: [],
      parts: {},
      appearStatus,
      totalPrice: 0,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入出库单名称',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        apply_admin_id: [
          {
            required: true,
            message: '请选择申请人',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      partsRules: {
        part_id: [
          {
            required: true,
            message: '请选择备件',
            trigger: 'change'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }
        ]
      },
      partsInfo: {},
      currentParts: {}
    }
  },
  created() {
    this.index()
  },
  methods: {
    index() {
      const id = this.$route.params.id
      API.getOne(id).then(response => {
        if (response.error_code === 47404) {
          this.$alert('您请求的出库单不存在', '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.backUrl()
            }
          })
        }
        this.data = response.data
        this.list = response.data.parts_list
        this.list.map((item) => {
          if (item.parts) {
            this.totalPrice += item.number * item.parts.price
          }
        })
        if (response.data.status === 0) {
          this.review = true
          this.canAppend = true
        }
        if (response.data.status === 1) {
          this.same = null
        }
      })
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      const thisForm = this.$refs.parts_form
      const appear_data = {
        'part_id': this.parts.part_id,
        'number': this.parts.number,
        'notice': this.parts.notice,
        'appear_id': this.$route.params.id
      }
      const errorCode = 47004
      const errorMessage = '该备件已存在'
      if (this.parts.number > this.currentParts.number) {
        this.$message.error('添加的数量不能大于备件的当前数量！')
        return false
      } else {
        this.appendParts(API, thisForm, appear_data, errorCode, errorMessage)
      }
    },
    remove(id) {
      const parts_data = {
        'id': id
      }
      this.removeParts(API, id, parts_data)
    },
    reviewSuccess() {
      const reviewData = {
        'status': 1,
        'id': this.data.id
      }
      API.review(reviewData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('出库完成！')
          this.backUrl()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    sameSuccess() {
      if (!this.data.same) {
        this.$message.error('先选择出库单！')
        return
      }
      if (this.data.same === this.data.id) {
        this.$message.error('要合并的出库单不能和本单是同一单')
        return
      }
      const reviewData = {
        'w': this.data.same,
        'id': this.data.id
      }
      API.same(reviewData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('合并完成！')
          this.reload()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    getPartsInfo() {
      if (this.parts.part_id) {
        PartsApi.getOne(this.parts.part_id).then(res => {
          this.currentParts = res.data
        })
      }
    },
    goBack() {
      this.goUrl('/stock/appear')
    }
  }
}
</script>
